<template>
    <div class="appContent">
        <HeadTopVue></HeadTopVue>
        <LunBoVue></LunBoVue>
        <LunBoXiaMianVue></LunBoXiaMianVue>
        <JinJiZhaoPinVue></JinJiZhaoPinVue>
        <LunBoErVue></LunBoErVue>
         <div class="message">
     <div class="messageskicy">
          <div class="MessageColumn">
      <transition name="judge">
          <span v-show="judge" ref="spans"></span>
      </transition>
      <router-link tag="div" class="remen" to="/home/lietou" @click.native="movespan1">热门招聘</router-link>
      <router-link tag="div" class="remen" to="/home/toutiao" @click.native="moveSpan2">聘头条</router-link>
      <router-link tag="div" class="remen" to="/home/hot" @click.native="moveSpan3">麟越猎头</router-link>
  </div>
     </div>
  <router-view></router-view>
  </div>
   </div>
</template>

<script>
import HeadTopVue from './HeadTop.vue'
import LunBoVue from '../../components/xiaozujian/LunBo.vue'
import LunBoXiaMianVue from '../../components/xiaozujian/LunBoXiaMian.vue'
import JinJiZhaoPinVue from '../../components/xiaozujian/JinJiZhaoPin.vue'
import LunBoErVue from '../../components/xiaozujian/LunBoEr.vue'
export default {
    data(){
        return{
            judge:false
        }
    },
  components:{
    HeadTopVue,
    LunBoVue,
    LunBoXiaMianVue,
    JinJiZhaoPinVue,
    LunBoErVue,
  },
  methods:{
      movespan1(){
          this.judge=true
          this.$refs.spans.style.left='.75rem'
          this.$refs.spans.style.transition="all 0.5s"
      }
      ,
      moveSpan2(){
          this.judge=true
          this.$refs.spans.style.left='3.2rem'
          this.$refs.spans.style.transition="all 0.5s"
      }
      ,
      moveSpan3(){
          this.judge=true
          this.$refs.spans.style.left='5.7rem'
          this.$refs.spans.style.transition="all 0.5s"
      },
  }

}
</script>

<style scoped>
.message{
    width: 100%;
    background-color: white;
    border-bottom: .01rem solid #f5f8fa;
}
.messageskicy{
    width: 100%;
     height: .8rem;
    position: sticky;
    top: 0rem;
    left: 0;
    z-index: 25;
}
.MessageColumn{
    width: 100%;
    height: .7rem;
    display: flex;
   
    justify-content: space-between;
    background-color: white;
    position: relative;
}
.remen{
    flex: 1;
    font-size: .2rem;
    height: 100%;
    text-align: center;
    color: black;
    /* display: flex; */
    text-align: center;
    line-height: .7rem;
}
span{
    content: "";
    display: block;
    width: 1rem;
    height: .1rem;
    background-color: #ba050e;
    border-radius: .05rem;
    position: absolute;
    bottom: 0;
    left: .75rem;
    /* .3rem   1.75rem  3.25rem 4.75rem 6.3rem*/
}
.router-link-active{
    color: #ba050e;
}
</style>